import 'package:flutter/material.dart';

import './SidebarPage.dart';  //侧边栏

import './TopTabPages/TopTabPage_1.dart';
import './TopTabPages/TopTabPage_2.dart';
import './TopTabPages/TopTabPage_3.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

//用于使用到了一点点的动画效果，因此加入了SingleTickerProviderStateMixin
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{

  //定义APP标题变量
  // String title;

  // changeTilte(String t){
  //   setState((){
  //     title = t;
  //   });
  // }

  //定义底部导航项目
  final List<Tab> _bottomTabs = <Tab>[
    Tab(text: 'Home',icon: Icon(Icons.home),),    //icon和text的显示顺序已经内定，如需自定义，到child属性里面加吧
    Tab(icon: Icon(Icons.history),text: 'History',),
    Tab(icon: Icon(Icons.book),text: 'Book',),
  ];

  //定义底部导航Tab
  TabController _bottomNavigation;

  //初始化导航Tab控制器
  @override
  void initState() {
    super.initState();
    _bottomNavigation = TabController(
      vsync: this,    //动画处理参数
      length: _bottomTabs.length    //控制Tab的数量
      );   //底部主导航栏控制器
  }

  //当整个页面dispose时，记得把控制器也dispose掉，释放内存
  @override
  void dispose() {
    _bottomNavigation.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.deepOrange,
            title: Text('title'),
          ),   //头部的标题AppBar
          drawer: Drawer(     //侧边栏按钮Drawer
            child: ListView(
              children: <Widget>[
                UserAccountsDrawerHeader(   //Material内置控件
                  accountName: Text('CYC'), //用户名
                  accountEmail: Text('example@126.com'),  //用户邮箱
                  currentAccountPicture: GestureDetector( //用户头像
                    onTap: () => print('current user'),
                    child: CircleAvatar(    //圆形图标控件
                      backgroundImage: NetworkImage('https://upload.jianshu.io/users/upload_avatars/7700793/dbcf94ba-9e63-4fcf-aa77-361644dd5a87?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),//图片调取自网络
                    ),
                  ),
                  otherAccountsPictures: <Widget>[    //粉丝头像
                    GestureDetector(    //手势探测器，可以识别各种手势，这里只用到了onTap
                      onTap: () => print('other user'), //暂且先打印一下信息吧，以后再添加跳转页面的逻辑
                      child: CircleAvatar(
                        backgroundImage: NetworkImage('https://upload.jianshu.io/users/upload_avatars/10878817/240ab127-e41b-496b-80d6-fc6c0c99f291?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),
                      ),
                    ),
                    GestureDetector(
                      onTap: () => print('other user'),
                      child: CircleAvatar(
                        backgroundImage: NetworkImage('https://upload.jianshu.io/users/upload_avatars/8346438/e3e45f12-b3c2-45a1-95ac-a608fa3b8960?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'),
                        ),
                    ),
                  ],
                  decoration: BoxDecoration(    //用一个BoxDecoration装饰器提供背景图片
                    image: DecorationImage(
                      fit: BoxFit.fill,
                      // image: NetworkImage('https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg')
                      //可以试试图片调取自本地。调用本地资源，需要到pubspec.yaml中配置文件路径
                      image: ExactAssetImage('image/lake.jpg'),
                    ),
                  ),
                ),
                ListTile(   //第一个功能项
                  title: Text('First Page'),
                  trailing: Icon(Icons.arrow_upward),
                  onTap: () {
                    Navigator.of(context).pop();
                    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => SidebarPage('First Page')));
                  }
                ),
                ListTile(   //第二个功能项
                  title: Text('Second Page'),
                  trailing: Icon(Icons.arrow_right),
                  onTap: () {
                    Navigator.of(context).pop();
                    Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => SidebarPage('Second Page')));
                  } 
                ),
                ListTile(   //第二个功能项
                  title: Text('Second Page'),
                  trailing: Icon(Icons.arrow_right),
                  onTap: () {
                    Navigator.of(context).pop();
                    Navigator.of(context).pushNamed('/a');
                  } 
                ),
                Divider(),    //分割线控件
                ListTile(   //退出按钮
                  title: Text('Close'),
                  trailing: Icon(Icons.cancel),
                  onTap: () => Navigator.of(context).pop(),   //点击后收起侧边栏
                ),
              ],
            ),
          ),
          body: TabBarView(
              controller: _bottomNavigation,
              children:  [      //注意顺序与TabBar保持一直
                News(data: '参数值'),
                TabPage2(),
                TabPage3(),
              ]
            ),
          bottomNavigationBar: Material(
            color: Colors.deepOrange,   //底部导航栏主题颜色
            child: TabBar(
              controller: _bottomNavigation,
              tabs: _bottomTabs,
              indicatorColor: Colors.white, //tab标签的下划线颜色
            ),
            
          ) 
    );
  }
}